<template>
    <div class="boxfd">
        <div class="titleacv14564">太仓市工业互联网大数据云平台</div>
        <div class="viewportabc1250">
            <div class="column">
                <!--企业分布-->
                <div class="monitor panelabc">
                    <div class="innerabc">
                        <div class="tabs">
                            <a href="javascript:;" data-index="0" class="active">各企业分布图</a>
                        </div>
                        <div class="contentabc123" style="display: block;">
                            <div class="content_top">
                                <qi-ye-fen-bu ref="qiYeFenBu" />
                            </div>
                        </div>
                    </div>
                </div>
                <!--企业占比-->
                <div class="point panelabc">
                    <div class="innerabc">
                        <h3>企业类型及占比</h3>
                        <div class="qiyeleixingxcdvv">
                            <div class="chartabc123">
                                <!-- 企业类型 -->
                                <div class="qi_lei">
                                    <!-- 企业类型玫瑰图 -->
                                    <qi-ye-lei-xing ref="qiYeLeiXing" />
                                </div>
                                <div class="qi_pai">
                                    <!-- 类型占比 -->
                                    <paihangjindutiao ref="paihangjindutiao" />
                                </div>
                            </div>
                            <loading :text="loadingText" v-if="paihangjindutiaoloading"></loading>

                        </div>
                    </div>
                </div>
            </div>
            <div class="column">
                <!-- 地图 -->
                <div class="map">
                    <h3>
                        <!-- 设备数据统计 -->
                    </h3>

                    <div class="chartabc123">
                        <div class="tiaolabc127">
                            <div class="tiaol_itemsacv128" v-for="items in sheBeiType" :key="items.id">
                                <div class="tiaol_items_titleabc129">
                                    <CountTo :startVal='startVal' :endVal='items.unm' :duration='duration' />
                                </div>
                                <div class="tiaol_items_contentabc130">
                                    <i class="el-icon-s-promotion" :style="{ color: `${items.color}` }"></i>
                                    <span>{{ items.name }}</span>
                                </div>

                            </div>
                        </div>

                        <!-- 地图组件 -->
                        <tai-cang-map />
                    </div>
                </div>
                <!-- 用户 -->
                <div class="usersabc panelabc">
                    <div class="innerabc">
                        <h3>全国用户总量统计</h3>
                        <div class="chartabc123">
                            <div class="barabc125">{{ info.title || '通知' }}</div>
                            <div class="dataabc126">
                                {{ info.content || '暂无内容' }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column">

                <!-- 在线设备 -->
                <div class="sales panelabc">
                    <div class="innerabc">
                        <div class="caption">
                            <h3>各区设备在线率</h3>
                            <div class="zaixianlvsss">
                                <div class="yibiaopanbox">
                                    <!-- 设备在线仪表盘 -->
                                    <zai-xian-yi-biao-pan ref="zaiXianYiBiaoPan" />
                                    <!-- 设备停机仪表盘 -->
                                    <kai-ji-biao-pan ref="tingJiYiBiaoPan" />
                                    <!-- 设备故障仪表盘 -->
                                    <gu-zhang-lv ref="guZhangYiBiaoPan" />
                                </div>
                                <!-- 各区设备在线率对比 -->
                                <yu-she-bei-lv ref="yuSheBeiLv" />
                                <loading :text="loadingText" v-if="yuSheBeiLvloading"></loading>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 排行榜 -->
                <div class="top panelabc">
                    <div class="innerabc">
                        <div class="allabc">
                            <h3>各区设备统计</h3>
                            <div class="geshebeitongjisss">
                                <div class="xiaofuqiu">
                                    <div class="xiaofuqiu_items" :class="[bgcColor(index + 1)]"
                                        v-for="(items, index) in geSheBelZaiXianFuQiuData" :key="items.id" style="bgc">
                                        <span>
                                            <CountTo :startVal='startVal' :endVal='items.value' :duration='duration' />
                                        </span>
                                        <span>{{ items.title }}</span>

                                    </div>
                                </div>
                                <!-- 设备统计折线图 -->
                                <loading :text="loadingText" v-if="xiaofuqiuloading"></loading>
                                <she-bei-tong-ji-zhe ref="sheBeiTongJiZheXian" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// 企业类型玫瑰图
import qiYeLeiXing from '../chartBox/qiYeLeiXing'
// // 企业分布
import qiYeFenBu from '../chartBox/qiYeFenBu'
// // 类型占比
import paihangjindutiao from '../chartBox/paihangjindutiao'
// //  设备在线仪表盘 
import zaiXianYiBiaoPan from '../chartBox/zaiXianYiBiaoPan'
// // 设备开机仪表盘
import kaiJiBiaoPan from '../chartBox/kaiJiBiaoPan'
// // 设备故障仪表盘
import guZhangLv from '../chartBox/guZhangLv'
// // 各区设备在线率对比
import yuSheBeiLv from '../chartBox/yuSheBeiLv'
// // 设备统计折线图
import sheBeiTongJiZhe from '../chartBox/sheBeiTongJiZhe'
// // 地图组件
import taiCangMap from '../chartBox/taiCangMap'
import CountTo from 'vue-count-to'
import loading from '../chartBox/Loading'
import axios from "axios";
export default {
    name: 'Pages1',
    components: {
        loading,
        qiYeLeiXing,
        qiYeFenBu,
        paihangjindutiao,
        zaiXianYiBiaoPan,
        kaiJiBiaoPan,
        guZhangLv,
        yuSheBeiLv,
        sheBeiTongJiZhe,
        taiCangMap,
        CountTo//数字滚动组件
    },
    data() {
        return {
            shebei: {},
            geSheBelZaiXianFuQiuData: [],//各区设备统计数据
            yuSheBeiLvloading: true,
            xiaofuqiuloading: true,
            paihangjindutiaoloading: true,
            loadingText: '加载中...',
            startVal: 0,//初始化数字滚动的值
            duration: 3000,//数字滚动所花费的时间
            geSheBelZaiXianFuQiuData: [],//各区设备统计数据
            info: '',
            sheBeiType: [{
                unm: '0',
                name: "企业总数",
                color: "#7011d9"
            }, {
                unm: '0',
                name: "设备总数",
                color: "#6da623"
            }, {
                unm: '0',
                name: "在线设备",
                color: "#2a1fce"
            }, {
                unm: '0',
                name: "离线设备",
                color: "#ed3f35"
            }]
        }
    },
    created() {
        this.qiYeLingXingZhan()
        this.getDataList()
        this.geSheBelZaiXianFuQiu()
        this.geSheBelZaiXianLv()
        this.getInfo()
        this.query()
    },
    mounted() {
    },
    methods: {
        // 每隔3分钟刷新一次页面
        query() {
            var that = this
            setInterval(function () {
                that.getDataList()
                that.geSheBelZaiXianFuQiu()
                that.geSheBelZaiXianLv()
                that.qiYeLingXingZhan()
                that.getInfo()
                that.$refs.qiYeFenBu.getDataList()
            }, 60000)

        },
        bgcColor(index) {
            var color = ''
            if (index == 1) {
                color = 'qiu1'
                return color
            } else if (index == 2) {
                color = 'qiu2'
                return color
            } else if (index == 3) {
                color = 'qiu3'
                return color
            } else if (index == 4) {
                color = 'qiu4'
                return color
            } else if (index == 5) {
                color = 'qiu5'
                return color
            } else if (index == 6) {
                color = 'qiu6'
                return color
            } else if (index == 7) {
                color = 'qiu7'
                return color
            }
        },
        // 请求接口，获取数据(地图上的四个模块)
        getDataList() {
            axios({
                method: "get",
                url: `${window.location.origin}/apigateway/api/dataset/1679334272984780801`,
                headers: {
                    apiKey: "a92a7db58b234595951bb2b39fcf6430",
                },
            }).then((res) => {
                this.sheBeiType[0].unm = res.data.data[0].qiyenum
                this.sheBeiType[1].unm = res.data.data[0].shebeinum
                this.sheBeiType[2].unm = parseInt(res.data.data[0].shebeinum) - parseInt(res.data.data[0].lixianshebeinum)
                this.sheBeiType[3].unm = res.data.data[0].lixianshebeinum
            });
        },
        // 请求接口，获取数据(各区设备统计数据)
        geSheBelZaiXianFuQiu() {
            axios({
                method: "get",
                url: `${window.location.origin}/apigateway/api/dataset/1679394946301661186`,
                headers: {
                    apiKey: "a92a7db58b234595951bb2b39fcf6430",
                },
            }).then((res) => {
                this.geSheBelZaiXianFuQiuData = res.data.data.map((items, index) => {
                    return {
                        value: items.zongshu == null ? 0 : items.zongshu,
                        title: items.suozaizhen,
                        color: `qiu${index + 1}`
                    }
                })
                // 把数据同时传给下面的面积图表
                this.$refs.sheBeiTongJiZheXian.zaiXian = []
                this.$refs.sheBeiTongJiZheXian.tingJi = []
                this.$refs.sheBeiTongJiZheXian.guZhang = []
                this.$refs.sheBeiTongJiZheXian.suoZaiZhen = []
                this.$refs.sheBeiTongJiZheXian.geYushuJuData = res.data.data
                this.$refs.sheBeiTongJiZheXian.getDataList()
                this.xiaofuqiuloading = false

            });
        },
        // 请求接口，获取数据（各设备在线率）
        geSheBelZaiXianLv() {
            axios({
                method: "get",
                url: `${window.location.origin}/apigateway/api/dataset/1679393988872081409`,
                headers: {
                    apiKey: "a92a7db58b234595951bb2b39fcf6430",
                },
            }).then((res) => {
                this.$refs.yuSheBeiLv.DataList = []
                this.$refs.yuSheBeiLv.yuanData = res.data.data
                this.$refs.yuSheBeiLv.geSheBelZaiXianLv()
                // 处理在线、开机、故障仪表盘
                var zaiXian = 0;
                var tingJi = 0;
                var guZhang = 0;
                var zongshu = 0;
                res.data.data.forEach(items => {
                    zaiXian += items.zaixiannum == null ? 0 : parseInt(items.zaixiannum)
                    tingJi += items.tingjinum == null ? 0 : parseInt(items.tingjinum)
                    guZhang += items.guzhangnum == null ? 0 : parseInt(items.guzhangnum)
                    zongshu += items.zongshu == null ? 0 : parseInt(items.zongshu)
                })
                this.$refs.zaiXianYiBiaoPan.zaiXianYiBiaoPan = (parseInt(zaiXian) +  parseInt(guZhang)) / zongshu * 100
                this.$refs.tingJiYiBiaoPan.tingJiYiBiaoPanData = tingJi / zongshu * 100
                this.$refs.guZhangYiBiaoPan.guZhangYiBiaoPanData = guZhang / zongshu * 100
                this.$refs.zaiXianYiBiaoPan.initCharts()
                this.$refs.tingJiYiBiaoPan.initCharts()
                this.$refs.guZhangYiBiaoPan.initCharts()
                this.yuSheBeiLvloading = false
                console.log(zaiXian, tingJi, guZhang, zongshu);

            });
        },
        // 请求接口，获取数据(企业类型与占比数据)
        qiYeLingXingZhan() {
            axios({
                method: "get",
                url: `${window.location.origin}/apigateway/api/dataset/1679319061196279809`,
                headers: {
                    apiKey: "a92a7db58b234595951bb2b39fcf6430",
                },
            }).then((res) => {
                this.$refs.qiYeLeiXing.yuanShuJu = res.data.data
                this.$refs.qiYeLeiXing.getDataList()
                this.$refs.paihangjindutiao.yuanShuJu = res.data.data
                this.$refs.paihangjindutiao.getDataList()
                this.paihangjindutiaoloading = false
            });
        },
        // 请求接口，获取数据(消息通知)
        getInfo() {
            axios({
                method: "get",
                url: `${window.location.origin}/apigateway/api/dataset/1680879879121637377`,
                headers: {
                    apiKey: "a92a7db58b234595951bb2b39fcf6430",
                },
            }).then((res) => {
                this.info = res.data.data[0]
            });
        },

    }
}
</script>
<style scoped>
@import '../css/index.css';

.vue-count-to {
    width: 100%;
    height: 100%;
}

.count-to {
    width: 300px;
    height: 300px;
    margin: 100px 0 0 100px;
    border: 1px solid red;
}

.count-to span {
    font-size: 30px;
    font-weight: 700;
    font-family: 'YJSZ';
}

.count-to>div:nth-of-type(1)>span {
    color: red;
}

.count-to>div:nth-of-type(2)>span {
    color: blue;
}

.count-to>div:nth-of-type(3)>span {
    color: pink;
}

.count-to>div:nth-of-type(4)>span {
    color: yellow;
}

.count-to>div:nth-of-type(5)>span {
    color: green;
}

.count-to>div:nth-of-type(6)>span {
    color: orange;
}

.count-to>div:nth-of-type(7)>span {
    color: cyan;
}

.count-to>div:nth-of-type(8)>span {
    color: purple;
}
</style>
